<template>
  <a-card title="未成单-超时未联系" :style="{ marginTop: '20px' }">
    <div slot="extra">
      <a-button-group>
        <a-button type="danger" size="small" ghost @click="noAbandon(1)">全部</a-button>
        <a-button type="danger" size="small" ghost @click="noAbandon(0)">一手</a-button>
      </a-button-group>
    </div>
    <div :style="{ marginBottom: '20px' }">
      <a-button :disabled="selectedRowKeys.length === 0" size="small" type="danger" @click="batchAbandon">批量放弃</a-button>
    </div>
    <s-table
      bordered
      ref="table"
      size="middle"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :row-key="(record) => record.customer_id"
      :columns="unpayColumns"
      :data="unpayData"
    >
      <template slot="tm_name" slot-scope="text, record">
        <div v-if="type == 'pt'">
          {{ record.pt_name }}
        </div>
        <div v-else-if="type == 'tm'">
          {{ text }}
        </div>
      </template>
      <template slot="source" slot-scope="text">
        {{ source[text] }}
      </template>
      <template slot="intention" slot-scope="text">
        {{ intention[text] }}
      </template>
      <template slot="customer_status" slot-scope="text">
        {{ customerStatus[text] }}
      </template>
      <div
        slot="customerStatusSelect"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-select
          style="width: 188px; margin-bottom: 8px; display: block;"
          placeholder="选择客户状态"
          @change="value => setSelectedKeys(value ? [value] : [])"
        >
          <a-select-option v-for="(item, index) in customerStatus" :key="index" :value="index">
            {{ item }}
          </a-select-option>
        </a-select>
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          筛选
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
          重置
        </a-button>
      </div>
      <div
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`筛选${column.title}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block;"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          筛选
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
          重置
        </a-button>
      </div>
      <div slot="phone" slot-scope="text, record">
        {{ text }} <a-icon type="phone" theme="filled" :style="{ color: '#1890ff', cursor: 'pointer' }" @click="makePhone(record.customer_id)" />
      </div>
      <div slot="action" slot-scope="text, record">
        <a-button type="primary" size="small" @click="$router.push({ name: 'AddContract', query: {customer_id: record.customer_id} })">做合同</a-button>
        <a-dropdown :trigger="['click']">
          <a-menu slot="overlay">
            <a-menu-item key="1">
              <a @click="$router.push({ name: 'CustomerDetail', params: {id: record.customer_id} })">详情</a>
            </a-menu-item>
            <a-menu-item key="2">
              <a @click="abandon(record.customer_id)">休了</a>
            </a-menu-item>
          </a-menu>
          <a-button type="primary" size="small" style="margin-left: 8px" ghost> 更多 <a-icon type="down" /> </a-button>
        </a-dropdown>
      </div>
    </s-table>
    <phone-modal v-if="modalVisible" :customer-id="customerId" @cancel="modalExit"></phone-modal>
  </a-card>
</template>

<script>
import storage from 'store'
import { STable, PhoneModal } from '@/components'
import { getUnpaid } from '@/api/adviser'
import { batchAbandon, takeAbandon } from '@/api/customer'
import col from '@/columns/adviser'
const unpayColumns = col.unpay

export default {
  components: {
    STable,
    PhoneModal
  },
  name: 'TimeoutCustomer',
  data () {
    return {
      unpayColumns,
      unpayData: parameters => {
        return getUnpaid(Object.assign(parameters, this.queryParam)).then(res => {
          this.customerStatus = res.result['customer_status_opts']
          this.intention = res.result['intention_opts']
          this.source = res.result['source_opts']
          return res.result
        })
      },
      customerId: '',
      modalVisible: false,
      customerStatus: {},
      intention: {},
      source: {},
      selectedRowKeys: [],
      queryParam: {},
      type: storage.get('Group_Type')
    }
  },
  methods: {
    makePhone (id) {
      this.customerId = id
      this.modalVisible = true
    },
    noAbandon (type) {
      if (type === 0) {
        this.queryParam['filter[is_abandon]'] = type
        this.$refs.table.refresh(true)
      } else {
        delete this.queryParam['filter[is_abandon]']
        this.$refs.table.refresh(true)
      }
    },
    modalExit (visible) {
      this.modalVisible = visible
    },
    abandon (id) {
      const app = this
      app.$confirm({
        title: '警告',
        content: '是否确定休了客户',
        onOk () {
          takeAbandon(id).then(res => {
            if (res.status === 0) {
              app.$refs.table.refresh()
            }
          })
        }
      })
    },
    /**
     * o
     * @param selectedKeys
     * @param confirm
     * @param dataIndex
     */
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },

    /**
     * 清除
     * @param clearFilters
     */
    handleReset (clearFilters) {
      clearFilters()
      this.searchText = ''
    },

    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    batchAbandon () {
      const app = this
      const queryParams = {}
      queryParams['customer_ids[]'] = app.selectedRowKeys
      app.$confirm({
        title: '警告',
        content: '是否确定休了' + app.selectedRowKeys.length + '条客户',
        onOk () {
          batchAbandon(queryParams).then(res => {
            if (res.status === 0) {
              app.$refs.table.refresh(true)
              app.selectedRowKeys = []
              window.location.reload()
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
